import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  unref,
  Fragment,
  renderList,
  normalizeClass
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "dv-border-box-1" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["fill", "points"];
const _hoisted_4 = ["fill"];
const _hoisted_5 = ["values"];
const _hoisted_6 = ["fill"];
const _hoisted_7 = ["values"];
const _hoisted_8 = ["fill"];
const _hoisted_9 = ["values"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BorderBox",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    const border = ["left-top", "right-top", "left-bottom", "right-bottom"];
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              class: "border",
              width: width.value,
              height: height.value
            },
            [
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.backgroundColor,
                  points: `10, 27 10, ${height.value - 27} 13, ${
                    height.value - 24
                  } 13, ${height.value - 21} 24, ${height.value - 11}
                                                                              38, ${
                                                                                height.value -
                                                                                11
                                                                              } 41, ${
                    height.value - 8
                  } 73, ${height.value - 8} 75, ${height.value - 10} 81, ${
                    height.value - 10
                  }
                                                                              85, ${
                                                                                height.value -
                                                                                6
                                                                              } ${
                    width.value - 85
                  }, ${height.value - 6} ${width.value - 81}, ${
                    height.value - 10
                  } ${width.value - 75}, ${height.value - 10}
                                                                              ${
                                                                                width.value -
                                                                                73
                                                                              }, ${
                    height.value - 8
                  } ${width.value - 41}, ${height.value - 8} ${
                    width.value - 38
                  }, ${height.value - 11}
                                                                              ${
                                                                                width.value -
                                                                                24
                                                                              }, ${
                    height.value - 11
                  } ${width.value - 13}, ${height.value - 21} ${
                    width.value - 13
                  }, ${height.value - 24}
                                                                              ${
                                                                                width.value -
                                                                                10
                                                                              }, ${
                    height.value - 27
                  } ${width.value - 10}, 27 ${width.value - 13}, 25 ${
                    width.value - 13
                  }, 21
                                                                              ${
                                                                                width.value -
                                                                                24
                                                                              }, 11 ${
                    width.value - 38
                  }, 11 ${width.value - 41}, 8 ${width.value - 73}, 8 ${
                    width.value - 75
                  }, 10
                                                                              ${
                                                                                width.value -
                                                                                81
                                                                              }, 10 ${
                    width.value - 85
                  }, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`
                },
                null,
                8,
                _hoisted_3
              )
            ],
            8,
            _hoisted_2
          )),
          (openBlock(),
          createElementBlock(
            Fragment,
            null,
            renderList(border, item => {
              return createElementVNode(
                "svg",
                {
                  key: item,
                  width: "150px",
                  height: "150px",
                  class: normalizeClass(`${item} border`)
                },
                [
                  createElementVNode(
                    "polygon",
                    {
                      fill: unref(propValue).base.colorLeft,
                      points:
                        "6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
                    },
                    [
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "fill",
                          values: `${unref(propValue).base.colorLeft};${
                            unref(propValue).base.colorRight
                          };${unref(propValue).base.colorLeft}`,
                          dur: "0.5s",
                          begin: "0s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_5
                      )
                    ],
                    8,
                    _hoisted_4
                  ),
                  createElementVNode(
                    "polygon",
                    {
                      fill: unref(propValue).base.colorRight,
                      points:
                        "27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
                    },
                    [
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "fill",
                          values: `${unref(propValue).base.colorRight};${
                            unref(propValue).base.colorLeft
                          };${unref(propValue).base.colorRight}`,
                          dur: "0.5s",
                          begin: "0s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_7
                      )
                    ],
                    8,
                    _hoisted_6
                  ),
                  createElementVNode(
                    "polygon",
                    {
                      fill: unref(propValue).base.colorLeft,
                      points:
                        "9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
                    },
                    [
                      createElementVNode(
                        "animate",
                        {
                          attributeName: "fill",
                          values: `${unref(propValue).base.colorLeft};${
                            unref(propValue).base.colorRight
                          };transparent`,
                          dur: "1s",
                          begin: "0s",
                          repeatCount: "indefinite"
                        },
                        null,
                        8,
                        _hoisted_9
                      )
                    ],
                    8,
                    _hoisted_8
                  )
                ],
                2
              );
            }),
            64
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const BorderBox = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-3b46ace1"]
]);
export { BorderBox as default };
